<template>
  <view class="content">
    <view class="qrcodeView">
      <canvas id="qrcode" canvas-id="qrcode" style="width: 200px; height:200px;" />
    </view>
    <my-tabbar :currentTab='1' />
  </view>
</template>

<script>
  import UQRCode from 'uqrcodejs'; // npm install uqrcodejs
  export default {
    data() {
      return {

      }
    },
    onLaunch() {},
    onReady() {
      // 获取uQRCode实例
      var qr = new UQRCode();
      // 设置二维码内容
      qr.data = "https://uqrcode.cn/doc";
      // 设置二维码大小，必须与canvas设置的宽高一致
      qr.size = 200;
      // 设置二维码前景图，可以是路径
      qr.foregroundImageSrc = '/static/logo.png'
      // 调用制作二维码方法
      qr.make();
      // 获取canvas上下文
      var canvasContext = uni.createCanvasContext('qrcode', this); // 如果是组件，this必须传入
      // 设置uQRCode实例的canvas上下文
      qr.canvasContext = canvasContext;
      // 调用绘制方法将二维码图案绘制到canvas上
      qr.drawCanvas();
    },
    methods: {}
  }
</script>

<style lang="scss">
  .qrcodeView {
    display: flex;
    justify-content: center;
  }
</style>